<template>
	<wt-autocomplete
		v-model="currentValue"
		:multiple="false"
		:allow-add="false"
		:query="query"
		placeholder="请输入医生姓名进行查询"
		custom-icon="search"
		@custom-icon="confirm"
		@select="confirm"
		@keyup.enter.native="confirm"
		:custom-result-parser="parseQuery"
		:custom-option-component="customItemComponent"
	></wt-autocomplete>
</template>
<script>
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	import AutoComplete from '../../../Resources/components/wt-autocomplete'

	Vue.use(ElementUI);
	Vue.component(AutoComplete.name, AutoComplete);

	export default {
		name: 'wt-keyword-selector',
		props: {
			value: [Array, String],
		},
		data: function () {
			return {
				currentValue: this.value,
				customItemComponent: 'wt-keyword-option-item',
				query: {
					url: 'doctor/patient/case/search_hints',
					filterParam: 'key',
					method: 'GET',
					transfer: true,
					pagination: true,
					value: 'diagnosesName',
				}
			}
		},
		watch: {
			'value'(val, oldValue) {
				this.setCurrentValue(val);
			},
		},
		methods: {
			setCurrentValue(value) {
				if (value === this.currentValue) return;
				this.currentValue = value;
			},
			confirm(e) {
				e && e.target && e.target.blur()
				setTimeout(() => {//这里延迟是为了给搜索框展开的提示以过度时间
                    this.$emit('input', this.currentValue);
				},200)
			},
            parseQuery(data) {
			  let display = [];
			    data.diagnose_name.forEach(function (val,index) {
			        display.push({value:val.diagnosesName,data:val})
                });
                data.patient_name.forEach(function (val,index) {
                    display.push({value:val.patient_name,data:val})
                });
                data.surgery_name.forEach(function (val,index) {
                    display.push({value:val.surgeryName,data:val})
                });
			  // display.push({ value: '', data: data});
			  return display;
			},
		},
		created() {
			Vue.component(this.customItemComponent, {
				functional: true,
					render: function (h, ctx) {
						var item = ctx.props.item;
						var data = item.data;
						let value = item.value;
						if (data.diagnosesName) {
							value = '诊断：' + value;
						}
						else if (data.patient_name) {
							value = '患者：' + data.patient_id + '-'+ value;
						}
						else if (data.surgeryName) {
							value = '手术：' + value;
						}						
						let display = [
							h('div', { attrs: { class: 'name' } }, [value]),
						];
						return h('li', ctx.data, display);
					},
					props: {
						item: { type: Object, required: true }
					}
			});
		}
	}
</script>